<template>
  <div>返回列表</div>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span class="fonts">充值价格配置</span>
        <el-button class="button1" text @click="dialogVisible = true">添加套餐+</el-button>
      </div>
    </template>
    <ul v-for="item in listData" :key="jiage" class="text item">
      <li>{{ item.priceName }}:
        <span>冲</span>
        <el-input v-model="item.cPrice" style="width:15%" /><span>送</span>
        <el-input v-model="item.sPrice" style="width:15%" />
        <span class="rightcz"><span style="color: blue;">保存</span><span
            style="font-weight:bolder;color: red;">X</span></span>
      </li>

    </ul>
  </el-card>

  <el-dialog v-model="dialogVisible" title="添加套餐" width="30%" draggable>

    <el-form :model="form" label-width="120px">

     <el-form-item label="套餐名">
        <el-input v-model="form.priceName" style="width:80%"/>
      </el-form-item>
      <el-form-item label="充值">
        <el-input v-model="form.cPrice" style="width:80%"/>
      </el-form-item>
      <el-form-item label="赠送">
        <el-input v-model="form.sPrice" style="width:80%" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="color: blue;">确认</el-button>
        <el-button @click="dialogVisible = false" style="color: red;">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue"
const form = reactive({
  priceName: '',
  cPrice: '',
  region: '',
  delivery: false,
  sPrice: ""
})

const onSubmit = function () {
    console.log('submit!',form)

}

const dialogVisible = ref(false)
const listData = [
  { priceName: '价格一', cPrice: '321', sPrice: '222' },
  { priceName: '价格二', cPrice: '1321', sPrice: '25152' },
]
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 40rem;
  height: 40rem;
  margin: 2.5rem;
}

.button1 {

  width: 9rem;
  height: 3.5rem;
  background-color: rgb(22, 155, 213);
  color: white;
}

.box-card .button1:hover {
  background-color: gray
}

.fonts {
  font-size: 1.7rem;
}

ul li span {
  margin: 0 12px;
}

ul li .rightcz {
  cursor: pointer;
}
</style>